<script setup lang='ts'>
import { useRenderIcon } from '@/components/ReIcon/src/hooks';

</script>

<template>
<ElSpace class="w-full" fill :fill-ratio="16">


      <ElCard class="flex-1">

        <ElStatistic :value="138">
          <template #title>
            <div class="flex items-center text-xl">
              <span>主播</span>
              <el-tooltip effect="dark" content="开播主播数量" placement="top">
                <el-icon style="margin-left: 4px" :size="12">
                  <component :is="useRenderIcon('ep:question-filled')" />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </ElStatistic>
      </ElCard>
      <ElCard class="flex-1">

        <ElStatistic :value="138">
          <template #title>
            <div class="flex items-center text-xl">
              <span>团战场次</span>
              <el-tooltip effect="dark" content="开团总场数" placement="top">
                <el-icon style="margin-left: 4px" :size="12">
                  <component :is="useRenderIcon('ep:question-filled')" />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </ElStatistic>
      </ElCard>
      <ElCard class="flex-1">

        <ElStatistic :value="138">
          <template #title>
            <div class="flex items-center text-xl">
              <span>赛季卡</span>

              <el-tooltip effect="dark" content="赛季卡收益" placement="top">
                <el-icon style="margin-left: 4px" :size="12">
                  <component :is="useRenderIcon('ep:question-filled')" />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </ElStatistic>
      </ElCard>
      <ElCard class="flex-1">

        <ElStatistic :value="138">
          <template #title>
            <div class="flex items-center text-xl">
              <span>赛事</span>

              <el-tooltip effect="dark" content="龙灵技刷新收益" placement="top">
                <el-icon style="margin-left: 4px" :size="12">
                  <component :is="useRenderIcon('ep:question-filled')" />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </ElStatistic>
      </ElCard>
      <ElCard class="flex-1">

        <ElStatistic :value="138">
          <template #title>
            <div class="flex items-center text-xl">
              <span>礼物</span>

              <el-tooltip effect="dark" content="礼物打赏收益" placement="top">
                <el-icon style="margin-left: 4px" :size="12">
                  <component :is="useRenderIcon('ep:question-filled')" />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </ElStatistic>
      </ElCard>
      <ElCard class="flex-1">

        <ElStatistic :value="138">
          <template #title>
            <div class="flex items-center text-xl">
              <span>合计</span>

              <el-tooltip effect="dark" content="合计总收益" placement="top">
                <el-icon style="margin-left: 4px" :size="12">
                  <component :is="useRenderIcon('ep:question-filled')" />
                </el-icon>
              </el-tooltip>
            </div>
          </template>
        </ElStatistic>
      </ElCard>

    </ElSpace>
</template>

<style lang='scss' scoped>

</style>
